<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        } 

        body {
            /* background-color: #000; */
        }

        div {
            position: absolute;
            left: calc(50% - 350px);
            top: 100px;
            width: 500px;
            height: 150px;
            font-size: 100px;
            font-weight: 700;
            color: transparent;
            /* 配合这个操作，可以只展示描边 */

            -webkit-text-stroke: 1px red;
            /* 描边粗细，描边颜色 */

            font-family: simsun, sans-serif;
            /* 这个字体配合描边非常炫酷，可惜我电脑的这个字体和成哥的不一样，why？ */




        }

        @font-face {
            font-family: 'abc';
            src: url();
            /* 引入字体包 具体参考袁老师课程*/
            /* 一般中文字体包比较大，而英文字体包比较小 */
            /* 即使这样，使用整个字体包的场景仍然很少 */
            /* 使用较多的是字体图标，可以几个图标单独打包成一个字体包 */
        }

        @font-face {
            font-family: 'diyfont';
            src: url('diyfont.eot');
            /* IE9+ */
            src: url('diyfont.eot?#iefix') format('embedded-opentype'),
                /* IE6-IE8 */
                url('diyfont.woff') format('woff'),
                /* chrome、firefox */
                url('diyfont.ttf') format('truetype'),
                /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
                url('diyfont.svg#fontname') format('svg');
                /* iOS 4.1- */

            /* 引入的其实是一个字体包的不同格式 */
            /* 每种格式对应一种扩展名 */
            /* 不同格式对应不同的编码方式，前提是扩展名不是自己瞎写的 */
            /* 格式、扩展名类别： */
            /* truetype   .ttf  */
            /* opentype   .opt  可以说是truetype的超集 */
            /* woff       .woff */
            /* 还有 .eat   .svg */
            /* 操作系统和浏览器对不同字体格式的兼容性不一样 */

            /* MIME协议：以前是邮件传输协议，后来被用于浏览器 */
            /* MIME协议其实就是一种映射关系，扩展名---> MIME类型 */
            /* 桌面双击一个文件，操作系统会调用扩展名对应的程序来展示 */
            /* 但是浏览器不具备这个功能，要处理不同格式的文件，依赖MIME类型（有时需要写，有时不用写，即使不写，仍然会依赖浏览器内部的MIME协议）以及底层的操作系统 */

            /* 而且不同的浏览器的MIME协议不是最新的，就是说可能这款浏览器就没有.ttf的映射 */
            /* 即使浏览器的MIME协议是最新的，这就意味着有.ttf的MIME类型，但是浏览器就是不支持这种扩展名  */
            /* format 就是让浏览器认识这种扩展名的，相当于手动指定MIME类型 */
        }
    </style>
</head>

<body>
    <div>成哥很帅</div>
</body>

</html>